import WebpackLicense from '@components/WebpackLicense';

<WebpackLicense from="https://webpack.js.org/plugins/source-map-dev-tool-plugin/" />

# SourceMapDevToolPlugin

This plugin enables more fine grained control of source map generation. It is also enabled automatically by certain settings of the [`devtool`](/config/devtool.html) configuration option.

```js
new rspack.SourceMapDevToolPlugin(options);
```

## Options

### test

- **Type:** `string` `RegExp` `[string, RegExp]`

Include source maps for modules based on their extension (defaults to `.js`, `.mjs`, and `.css`).

### include

- **Type:** `string` `RegExp` `[string, RegExp]`

Include source maps for module paths that match the given value.

### exclude

- **Type:** `string` `RegExp` `[string, RegExp]`

Exclude modules that match the given value from source map generation.

### filename

- **Type:** string

Defines the output filename of the SourceMap (will be inlined if no value is provided).

### append

- **Type:** `string` `function`

Appends the given value to the original asset. Usually the `#sourceMappingURL` comment. `[url]` is replaced with a URL to the source map file. Path parameters are supported: `[chunk]`, `[filename]` and `[contenthash]`. Setting append to false disables the appending.

### moduleFilenameTemplate

- **Type:** `string`

See [`output.devtoolModuleFilenameTemplate`](/config/output#outputdevtoolmodulefilenametemplate).

### fallbackModuleFilenameTemplate

- **Type:** `string`

See link above.

### namespace

- **Type:** `string`

See [`output.devtoolNamespace`](/config/output#outputdevtoolnamespace).

### module

- **Type:** `boolean`
- **Default:** `true`

Indicates whether loaders should generate source maps.

### columns

- **Type:** `boolean`
- **Default:** `true`

Indicates whether column mappings should be used.

### noSources

- **Type:** `boolean`
- **Default:** `false`

Prevents the source file content from being included in the source map.

### publicPath

- **Type:** `string`

Emits absolute URLs with public path prefix, e.g. `https://example.com/project/`.

### fileContext

- **Type:** `string`

Makes the `[file]` argument relative to this directory.

The `fileContext` option is useful when you want to store source maps in an upper level directory to avoid `../../` appearing in the absolute `[url]`.

### sourceRoot

- **Type:** `string`

Provide a custom value for the `sourceRoot` property in the SourceMap.

:::tip
Setting `module` and/or `columns` to `false` will yield less accurate source maps but will also improve compilation performance significantly.
:::

:::tip
If you want to use a custom configuration for this plugin in [development mode](/config/mode#development), make sure to disable the default one. I.e. set `devtool: false`.
:::

## Examples

The following examples demonstrate some common use cases for this plugin.

### Basic use case

You can use the following code to replace the configuration option devtool: inline-source-map with an equivalent custom plugin configuration:

```js title="rspack.config.mjs"
import { rspack } from '@rspack/core';

export default {
  // ...
  devtool: false,
  plugins: [new rspack.SourceMapDevToolPlugin({})],
};
```

### Exclude vendor maps

The following code would exclude source maps for any modules in the vendor.js bundle:

```js
new rspack.SourceMapDevToolPlugin({
  filename: '[file].map[query]',
  exclude: ['vendor.js'],
});
```

### Host source maps externally

Set a URL for source maps. Useful for hosting them on a host that requires authorization.

```js
new rspack.SourceMapDevToolPlugin({
  append: '\n//# sourceMappingURL=https://example.com/sourcemap/[url]',
  filename: '[file].map[query]',
});
```

And for cases when source maps are stored in the upper level directory:

```
project
|- dist
  |- public
    |- bundle-[hash].js
  |- sourcemaps
    |- bundle-[hash].js.map
```

With the following config:

```js
new rspack.SourceMapDevToolPlugin({
  filename: 'sourcemaps/[file].map',
  publicPath: 'https://example.com/project/',
  fileContext: 'public',
});
```

Will produce the following URL:

```
https://example.com/project/sourcemaps/bundle-[hash].js.map
```
